<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script>
// 前端模块化
// 模块，一个js文件就是一个模块
// 模块化，将项目中的程序按照业务或功能拆分成多个更小的程序单元

// ES6之前，前端一直没有模块化规范
// 社区中的几个主流模块化规范：Commonjs、AMD、CMD等规范

// Commonjs
// 用于后端，同步加载

// AMD异步模块定义
// 代表作是require.js，推崇依赖前置，提前执行
// 用于前端，异步加载

// CMD通用模块定义
// 代表作是sea.js，推崇依赖就近，延迟执行
// 用于前端，异步加载

// ES modeule
// ES模块，在语言标准层面上的模块化规范
// ES模块完全可以取代Commonjs、AMD、CMD等规范

// 使用ES模块：
// 1.在script标签设置type="module"
// 2.ES模块自动采用严格模式
// 3.不能裸写路径，比如 'hehe.js'
// 4.当前页面需要在服务器环境运行

// ES模块主要命令：import和export
// import用于输入模块功能
// export用于输出模块功能

// 异步脚本，异步加载，不会阻塞页面渲染
// 1.在script标签设置type="module"，异步脚本，等到DOM加载完成时执行
// 2.在script标签设置defer属性，异步脚本，等到DOM加载完成时执行
// 3.在script标签设置async属性，异步脚本，脚本加载完成时立即执行

// defer和async区别：
// defer DOM加载完成后执行
// async 加载完成后立即执行
// 有多个defer脚本时，按顺序执行
// 有多个async脚本时，不按顺序执行

// 防抖
// 在事件被触发一段时间后再执行回调函数，如果再这段时间内又被触发，则重新计时

// 节流
// 规定时间内，只能触发一个函数，如果在规定时间内多次触发，只执行一次

</script>
</body>
</html>